<template>
	<view>
		<!-- 专辑背景 开始 -->
		<view class="album_bg">
			<image :src="album.cover" mode="widthFix"></image>
			<view class="album_info">
				<view class="album_name">{{album.name}}</view>
				<view class="album_btn">关注专辑</view>
			</view>
		</view>
		<!-- 专辑背景 结束 -->
		
		<!-- 专辑作者 开始 -->
		<view class="album_author">
			<view class="album_author_info" v-if="album.user">
				<image mode="widthFix" :src="album.user.avatar"></image>
				<view class="author_name">{{album.user.name}}</view>
			</view>
			<text class="album_author_desc">{{album.desc}}</text>
		</view>
		<!-- 专辑作者 结束 -->
		
		<!-- 列表	开始 -->
		<view class="album_list">
			<view class="album_item">
				
			</view>
		</view>
		<!-- 列表	结束 -->
	</view>
</template>

<script>
	export default {
		data(){
			return{
				params:{
					limit:10,
					order:"new",
					skip:0,
					// 1返回值中有album对象表示第一次请求数据
					// 0返回值中只有wallpaper数组不是第一次请求数据
					first:1
				},
				id:-1,
				album:{},
				wallpaper:[]
			}
		},
		methods:{
			getList(){
				this.request({
					url:`/v1/wallpaper/album/${this.id}/wallpaper`,
					data:this.params
				}).then(result=>{
					console.log(result);
					this.album=result.res.album;
					this.wallpaper=result.res.wallpaper;
				})
			}
		},
		onLoad(option) {
			// 给id赋值
			this.id=option.id;
			// this.id="6168fa6ae7bce730c58222d1";
			// 请求数据
			this.getList();
		}
	}
</script>

<style scoped lang="scss">
	.album_bg{
		position: relative; 
		image{
			
		}
		.album_info{
			position: absolute;
			width: 100%;
			left: 0;
			bottom: 0;
			display: flex;
			justify-content: space-between;
			height: 80rpx;
			align-items: center;
			color: #fff;
			padding: 0 15rpx;
			.album_name{
				font-size: 40rpx;
				
			}
			.album_btn{
				background-color: $color;
				width: 152rpx;
				height: 60rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 10rpx;
			}
		}
	}
	.album_author{
		padding: 10rpx;
		.album_author_info{
			display: flex;
			padding: 10rpx 0;
			image{
				width: 50rpx;
			}
			.author_name{
				color: #000;
				margin-left: 15rpx;
			}
		}
		.album_author_desc{}
	}
</style>
